//
// Tooltips
// --------------------------------------------------

@attentionBg: #fef1e3;
@tipBorderWidth: 2px;
@arrowOffset: 7px;
@attentionArrowOffset: @arrowOffset - @tipBorderWidth;

.type-style {
  &.normal, &.confirm {
    .tooltip-inner {
      background-color: @white;
      color: @grayDarker;
    }
  }
  &.attention {
    .tooltip-inner {
      background-color: @attentionBg;
      color: #d7842b
    }
  }

  // Wrapper for the tooltip content
  .tooltip-inner {
    padding: 9px 11px;
    text-decoration: none;
    font-weight: normal;
    white-space: pre-wrap;  //fix bug in firefox: not break word when long line withou space
  }

}
// Base class
.sui-tooltip {
  position: absolute;
  z-index: @zindexTooltip;
  display: block;
  visibility: visible;
  max-width: 300px;
  border: @tipBorderWidth solid @tooltipBorderColor;
  opacity: 0;
  //.opacity(0);   bug in IE8 
  .border-radius(2px);
  &.in     { /*.opacity(100);*/ opacity:1;}
  &.top    { margin-top:  -3px;}
  &.right  { margin-left:  3px;}
  &.bottom { margin-top:   3px;}
  &.left   { margin-left: -3px;}
  .type-style();
}



// Arrows
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

//如果不想用tooltip，但只想要三角效果，对三角父元素用.tooltip-only-arrow和.top|.bottom|.right|.left
.tooltip-only-arrow{
  position: relative;
  border:2px solid @tooltipBorderColor;

  .type-style();
}
.sui-tooltip ,.tooltip-only-arrow{
  &.attention {
    border: none;
    & .cover {
      display: none
    }
  }
  //------------------------------------------.top
  &.top .tooltip-arrow {
    bottom: -@arrowOffset;
    left: 50%;
    margin-left: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
    border-top-color: @tooltipBorderColor;
    & .tooltip-arrow.cover {
      margin-left: -@tooltipArrowWidth + 2;
      border-top-color: @white;
      top: -@arrowOffset;
    }
  }
  &.top.attention .tooltip-arrow {
    border-top-color: @attentionBg;
    bottom: -@attentionArrowOffset
  }
  //------------------------------------------.right
  &.right .tooltip-arrow {
    top: 50%;
    left: -@arrowOffset;
    margin-top: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
    border-right-color: @tooltipBorderColor;
    & .tooltip-arrow.cover {
      margin-top: -@tooltipArrowWidth + 2;
      border-right-color: @white;
      left: 0;
    }
  }
  &.right.attention .tooltip-arrow {
    border-right-color: @attentionBg;
    left: -@attentionArrowOffset
  }
  //------------------------------------------.left
  &.left .tooltip-arrow {
    top: 50%;
    right: -@arrowOffset;
    margin-top: -@tooltipArrowWidth;
    border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
    border-left-color: @tooltipBorderColor;
    & .tooltip-arrow.cover {
      margin-top: -@tooltipArrowWidth + 2;
      border-left-color: @white;
      left: -@arrowOffset;
    }
  }
  &.left.attention .tooltip-arrow {
    border-left-color: @attentionBg;
    right: -@attentionArrowOffset
  }
  //------------------------------------------.bottom
  &.bottom .tooltip-arrow {
    top: -@arrowOffset;
    left: 50%;
    margin-left: -@tooltipArrowWidth;
    border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
    border-bottom-color: @tooltipBorderColor;
    & .tooltip-arrow.cover {
      margin-left: -@tooltipArrowWidth + 2;
      border-bottom-color: @white;
      top: 0;
    }
  }
  &.bottom.attention .tooltip-arrow {
    border-bottom-color: @attentionBg;
    top: -@attentionArrowOffset
  }
  // ---- end 
  .tooltip-arrow.cover {
    border-width: @tooltipArrowWidth - 2;
  }

}
